{extend name="public/base"/}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/writer/style/books.css">
{/block}
{block name="body"}
    {include file="public/topmenu" /}
    {include file="public/changepwd" /}
    <div class="mainWrap pageCenter cf">     
        {include file="public/leftmenu" /}
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/writer/style/income.css">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/writer/style/reader_model.css">

        <div class="mainRight fl">
            <div class="crumbsWrap"><b></b><i class="before"><span>数据统计</span></i><em class="same"></em>
                    </div>

            <div class="tabSwitch cf">
                <span><a href="/stat/subscription/0.html">订阅统计</a></span>
                <span class="act"><a href="javascript:">读者群体画像</a></span>
                <span><a href="/stat/useraction.html">读者行为偏好</a></span>
            </div>
            <div class="incomeWrap reader-portrait">
                <div class="filter-box cf">
                    <div class="time-range fr">
                        <p>数据统计范围：2017年1月1日起至今</p>
                    </div>
                    <em>选择作品：</em>
                    <form method="post" action="/booknovelsvip/readermodel.html" id="subform">
                        <div class="combo-select"><select name="CBID" id="CBID" tabindex="-1">
                                                        <option value="0">暂无可选作品</option>                </select><div class="combo-arrow"></div><dl class="combo-dropdown"><dd class="option-item option-selected" data-index="0" data-value="0">暂无可选作品</dd></dl><input type="text" value="" class="combo-input text-input"></div>
                        <em>选择平台：</em>
                        <div class="combo-select"><select name="type" id="type" tabindex="-1">
                            <option value="2" selected="">起点读书</option>
                            <option value="1">QQ阅读</option>
                        </select><div class="combo-arrow"></div><dl class="combo-dropdown"><dd class="option-item option-selected" data-index="0" data-value="2">起点读书</dd><dd class="option-item" data-index="1" data-value="1">QQ阅读</dd></dl><input type="text" value="" class="combo-input text-input"></div>
                        <a class="button" href="javascript:" onclick="document.getElementById(&#39;subform&#39;).submit();return false">查看</a>
                    <input type="hidden" name="__hash__" value="1f766ced8d798d53645e04c4733baeda_b3bcf60764ccff2f5a793624088da0b1"></form>
                </div>
                <!--start 柱状图图表 性别-->
                <div class="bar-chart-wrap sex-chart mb30">
                    <h3>读者性别年龄比例</h3>
                                    <div class="chart-wrap">
                            <!-- start 暂无数据 -->
                            <div class="no-data">
                                <div class="null"></div>
                                <p>暂无数据</p>
                            </div>
                            <!-- end 暂无数据 -->
                        </div>        </div>
                <!--end 柱状图图表 性别-->

                <!-- start 主要读者TOP地区分布 -->
                <div class="bar-chart-wrap area-chart mb30">
                    <h3>主要读者TOP10地区分布</h3>
                    <div class="chart-wrap">
                                            <!-- start 暂无数据 -->
                            <div class="no-data">
                                <div class="null"></div>
                                <p>暂无数据</p>
                            </div>
                            <!-- end 暂无数据 -->            </div>
                </div>
                <!-- end 主要读者TOP地区分布 -->
            </div>
        <img id="requestLoadingTip" class="loadImg" style="display:none;" src="./订阅管理-读者画像_files/loading.gif"></div>
        <script type="text/javascript" src="__PUBLIC__/writer/js/reader_model.js"></script><script>
            $('select').comboSelect();
            $(function () {
                $('#j-areaData').highcharts({
                    chart: {
                        type: 'column',
                        backgroundColor:'#FAFAFA',
                        height:350
                    },
                    title: {
                        text: ''
                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    },
                    yAxis: {
                        gridLineWidth: 0,
                        title: {
                            text: ''
                        },
                        labels: {
                            enabled: false
                        },
                        min: 0,
                        minRange: 1,
                        tickAmount: 0
                    },
                    legend: {
                        enabled: false
                    },
                    series: [{
                        data: [
                            
        //
        //                    ['青海', 16],
        //                    ['甘肃', 12],
        //                    ['黑龙江', 9],
        //                    ['河南', 9],
        //                    ['上海', 7],
        //                    ['浙江', 5],
        //                    ['广东', 3],
        //                    ['福建', 1]
                        ],
                        dataLabels: {
                            enabled: true,
                            rotation: 0,
                            color: '#666',
                            align: 'center',
                            format: '{point.y:.1f}', // one decimal
                            y: -5,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial'
                            }
                        }
                    }]
                });
            });

            Highcharts.theme = {
                colors: ['rgba(132,213,155,.7)'],
                credits: {
                    enabled: false
                }
            };

            // Apply the theme
            Highcharts.setOptions(Highcharts.theme);
        </script>

    </div>
    {include file="public/footer" /}
<script type="text/javascript">
/*
    $(function () {
        var imgUrl = "";
        var artidx = "0";
        var selectid = "0";
        var articlename = "";

        CS.page.bookNovels.novelList.init(imgUrl,artidx,articlename,selectid);
    });*/
    $('#novelList').on('mouseenter', 'tr',
    function() {
        $(this).addClass('active').siblings('tr').removeClass('active');
    });
</script>
{/block}
{block name="script"}
{/block}


